import React, { useState } from 'react';
import { Picker, List, Calendar, Button, Toast } from 'antd-mobile';
import dayjs from 'dayjs';
import { history } from 'umi';
interface props {
  citys: { label: string; value: string }[];
  citysLoading: boolean;
}

export default function({ citys, citysLoading }: props) {
  const [selectedCity, setSelectedCity] = useState(['10101']);
  const [times, setTimes] = useState('可选时间');
  const [dateShow, setDateShow] = useState(false);
  const handleDateConfirm = (
    startTime: Date | undefined,
    endTime: Date | undefined,
  ) => {
    setTimes(
      dayjs(startTime).format('YYYY-MM-DD') +
        '~' +
        dayjs(endTime).format('YYYY-MM-DD'),
    );
    setDateShow(false);
  };
  const handleSearch = () => {
    if (times.includes('~')) {
      
      history.push({
        pathname: '/search',
        query: {
          code: selectedCity,
          startTime: times.split('~')[0],
          endTime: times.split('~')[1],
        },
      });
    } else {
      Toast.fail('请选择时间');
    }
  };

  return (
    <div className="search">
      <div className="search-addr">
        {!citysLoading && (
          <Picker
            title="城市"
            data={citys}
            value={selectedCity}
            cols={1}
            onChange={(v: any) => setSelectedCity(v)}
          >
            <List.Item>可选城市</List.Item>
          </Picker>
        )}
      </div>
      <div className="search-time" onClick={() => setDateShow(true)}>
        <p className="search-time_left">出租时间</p>
        <p className="search-time_right">{times}</p>
      </div>
      <Button type="warning" size="large" onClick={handleSearch}>
        搜索名宿
      </Button>
      <Calendar
        visible={dateShow}
        onCancel={() => setDateShow(false)}
        onConfirm={handleDateConfirm}
      />
    </div>
  );
}
